<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Evaluador Web</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<!-- This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="robots" content="all,follow" />

<meta name="author" lang="en" content="All: Your website name [www.your-website.com]; e-mail: info@your-website.com" />
<meta name="copyright" lang="en" content="webdesign: Vit Dlouhy [Nuvio - www.nuvio.cz; NuvioTemplates - www.nuviotemplates.com]; e-mail: hello@nuviotemplates.com" />

<meta name="description" content="..." />
<meta name="keywords" content="..." />

<link rel="stylesheet" media="screen,projection" type="text/css" href="http://localhost/Sistema360/common/theme/css/content.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/Sistema360/common/theme/css/table.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="http://localhost/Sistema360/common/theme/themes/css/main-msie.css" /><![endif]-->
<link rel="stylesheet" media="screen,projection" type="text/css" href="http://localhost/Sistema360/common/theme/css/scheme.css" />
<link rel="stylesheet" media="print" type="text/css" href="http://localhost/Sistema360/common/theme/css/print.css" />

<link class="include" rel="stylesheet" type="text/css" href="http://localhost/Sistema360/common/jqplot/jquery.jqplot.min.css" />
    
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    
<!-- Don't touch this! -->
    <script class="include" type="text/javascript" src="http://localhost/Sistema360/common/jqplot/jquery.jqplot.min.js"></script>
    
<!-- Additional plugins go here -->
  <script class="include" type="text/javascript" src="http://localhost/Sistema360/common/jqplot/plugins/jqplot.barRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="http://localhost/Sistema360/common/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="http://localhost/Sistema360/common/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="http://localhost/Sistema360/common/jqplot/plugins/jqplot.pointLabels.min.js"></script>

<title>Evaluador Web</title>
</head>

<body>

<div id="main">

<!-- Header -->
<div id="header">

<!-- Your logo -->
<h1 id="logo"><a href="#">Sistema Evaluador Web </a></h1>
<hr class="noscreen" />

		<!-- Your slogan -->
		<div id="slogan"><font face = "brush script MT" color = "#FFFFFF" size="6px">Iomicrom S.A.S</font></div>
		<hr class="noscreen" />

				<!-- Hidden navigation -->
				<p class="noscreen noprint"><em>Quick links: <a href="#content">content</a>, <a href="#nav">navigation</a>.</em></p>
				<hr class="noscreen" />

						</div> <!-- /header -->

						<!-- Navigation -->
						<div id="nav">

		<ul class="box">
		<li id="nav-breadcrumb"><a href="http://localhost/Sistema360/index.php/main">Inicio</a></li>
		<li id="nav-breadcrumb"><a href="http://localhost/Sistema360/index.php/main/load_module/statistics">Estad&iacute;sticas</a></li>
		<li id="nav-active"><a href="http://localhost/Sistema360/index.php/estadistica/load_content/dependencia">Estad&iacute;stica por cargo</a></li>
		<li id="nav-exit"><a href="http://localhost/Sistema360/index.php/logout">Cerrar Sesi&oacute;n</a></li>
		</ul>

		<hr class="noscreen" />
		</div> <!-- /nav -->

		<!-- 2 columns (content + sidebar) -->
		<div id="cols" class="box">

		<!-- Content -->
		<div id="content">

		<form method="post" action="http://localhost/Sistema360/index.php/evaluacion/load_content/calificar/competencia">
    			<h2 id="content-title">Estad&iacute;stica por cargo</h2>
	         	<div align="center">
	         	<table id="darktable">
	         	<thead>
	         	<tr>
	         			<th width="230px;">Nombre Evaluaci&oacute;n</th>
	         			<th width="230px;">Empleado Evaluado</th>
	         			<th width="50px;">No. Preguntas Tecnicas</th>
	         			<th width="50px;">No. Preguntas Humanas</th>
	         			<th width="50px;">Resultado Total Obtenido</th>
	         	</tr>
	         	</thead>
	         	<tbody>
					<?php echo $data['tabla_grafestadisticas']; ?>
	         	</tbody>
				</table>
          	</div>
          	
          	<div id="chart2b" align="center" style="margin-top:auto; margin-left:auto; margin-right:auto; width:500px; height:250px;"></div>
			
			
	<script class="code" type="text/javascript">
	$(document).ready(function(){
		
		var ticks = ['','Tecnicas', 'Humanas', ''];
        plot2b = $.jqplot('chart2b', 
                [
                 [
                   [<?php echo $data['porcentaje_tecnicas']; ?>,2], [<?php echo $data['porcentaje_humanas']; ?>,3] 
                 ], 
                ], {
            seriesDefaults: {
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                shadowAngle: 135,
                rendererOptions: {
                    barDirection: 'horizontal',
                    barMargin: 40,
                    fillToZero: true,
                }
            },
            series:[{},{color:"#6E8CEE"},{color:"#4FB3D7"},{}],
            axes: {
            	// Use a category axis on the x axis and use our custom ticks.
                yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                },
                // Pad the y axis just a little so bars can get close to, but
                // not touch, the grid boundaries.  1.2 is the default padding.
                xaxis: {
                    pad: 0,
                    tickOptions: {formatString: '%d%'},
                    min:0, 
                    max:100
                }
            }

        });
    
        $('#chart2b').bind('jqplotDataHighlight', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info2b').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+ ', pageX: '+ev.pageX+', pageY: '+ev.pageY);
            }
        );    
        $('#chart2b').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info2c').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+ ', pageX: '+ev.pageX+', pageY: '+ev.pageY);
            }
        );
            
        $('#chart2b').bind('jqplotDataUnhighlight', 
            function (ev) {
                $('#info2b').html('Nothing');
            }
        );
    });
	 </script>
          	
          	
            </form>

            <hr class="noscreen" />
                           
        </div> <!-- /content -->

        <hr class="noscreen" />
    
    </div> <!-- /cols -->
    
    <div id="cols-bottom"></div>

    <hr class="noscreen" />
    
    <!-- Footer -->
    <div id="footer">

        <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->            
        <p class="f-right"><a href="http://www.nuviotemplates.com/">Free web templates</a> presented by <a href="http://www.qartin.cz/">QARTIN</a>, sponsored by <a href="http://www.lekynainternetu.cz/">Leky</a></p>
        <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->
        
        <p>&copy;&nbsp;2013 <a href="http://www.iomicrom.co">iomicrom S.A.S</a></p>

    </div> <!-- /footer -->

</div> <!-- /main -->
</body>
</html>
